Ext.define("AmpleHarvest.addOns.keyboard.cPlugin",
{
	extend		: "Ext.util.Observable",
	events		: {},
	requires	:
	[
		"AmpleHarvest.addOns.keyboard.cKeyboard",
	],
	language	: 'US',
	showIcon	: true,
	/**
	 * Init of plugin
	 * 
	 * @param {Ext.Component}
	 *            field
	 */
	init		: function(obj_Field)
	{
		this.addEvents(
				{
					'expand'	: true,
					'collapse'	: true
				});

		if (obj_Field.getXType() != 'textfield'
				&& obj_Field.getXType() != 'textarea'
		// && obj_Field.getXType() != 'facetcombo'
		)
			return;

		this.component = obj_Field;
		obj_Field.virtualKeyboardPlugin = this;

		obj_Field.enableKeyEvents = true;
		obj_Field.on(
				{
					'destroy'	: this.destroy,
					'focus'		: function(f)
					{
						this.activeTarget = f;
					},
					'keypress'	: function(obj_Field, e)
					{
						if (e.getKey() == e.ESC)
							obj_Field.collapseKeyboard();
					},
					scope		: this
				});

		Ext.apply(obj_Field,
				{
					onRender			: Ext.Function.createSequence(
							obj_Field.onRender, this.onRender
					),

					initKeyboard		: function()
					{
						var cls = 'x-keyboard-container';

						this.keyboardContainer = Ext.create('Ext.Layer',
								{
									shadow		: true,
									useDisplay	: true,
									cls			:
									[
											cls, this.virtualKeyboardClass
									].join(' '),
									constrain	: false
								});

						this.keyboardContainer.setWidth(370);

						var config = this.keyboardConfig || {};
						config['showCloseButton'] = true;
						config['keyboardTarget'] = this;

						this.keyboard = Ext.create('AmpleHarvest.addOns.keyboard.cKeyboard',
								config
						);
						this.keyboard.render(this.keyboardContainer);

						this.keyboard.getTBar().add('-', new Ext.Button(
								{
									text		: this.keyboardConfig.closeButtonText
											|| 'Close',
									listeners	:
									{
										'click'	: this.collapseKeyboard,
										scope	: this
									},
									scope		: this
								}
						)
						);
					},

					collapseKeyboardIf	: function(e)
					{
						if (!e.within(this.wrap)
								&& !e.within(this.keyboardContainer)
								&& !this.keyboard.selectingLanguage)
						{
							this.collapseKeyboard();
						}
					},

					expandKeyboard		: function()
					{
						if (this.isKeyboardExpanded() /* || !this.hasFocus */)
						{
							return;
						}
						if (!this.keyboard)
							this.initKeyboard();
						// this.keyboardContainer.alignTo(this.wrap,
						// this.keyboardAlign || 'tl-bl?');
						this.keyboardContainer.show();
						this.keyboardContainer.slideIn();
						this.keyboardContainer.anchorTo(this.inputEl, 'tl-bl?');
						this.keyboardContainer.setZIndex(999999990);
						Ext.getDoc().on('mousewheel', this.collapseKeyboardIf,
								this
						);
						Ext.getDoc().on('mousedown', this.collapseKeyboardIf,
								this
						);
						this.virtualKeyboardPlugin.fireEvent('expand', this);
					},

					collapseKeyboard	: function()
					{
						if (!this.isKeyboardExpanded())
						{
							return;
						}
						// this.keyboardContainer.hide();
						this.keyboardContainer.slideOut();
						Ext.getDoc().un('mousewheel', this.collapseKeyboardIf,
								this
						);
						Ext.getDoc().un('mousedown', this.collapseKeyboardIf,
								this
						);
						this.virtualKeyboardPlugin.fireEvent('collapse', this);
					},

					isKeyboardExpanded	: function()
					{
						return this.keyboardContainer
								&& this.keyboardContainer.isVisible();
					}

				}
		); // end of Ext.apply
	}, // end of function init

	destroy		: function(component)
	{
		if (component)
		{
			if (component.keyboard)
			{
				component.keyboard.keyboard.remove();
				delete component.keyboard;
			}
			if (component.keyboardContainer)
			{
				component.keyboardContainer.remove();
				delete component.keyboardContainer;
			}
		}
	},

	expand		: function()
	{
		if (this.activeTarget)
		{
			this.activeTarget.expandKeyboard();
		}
	},

	onRender	: function(ct, position)
	{
		this.wrap = this.el.wrap(
				{
					cls	: "x-form-field-wrap"
				});
		if (this.fieldLabel && this.keyboardConfig.showIcon)
		{
			var label = this.el.findParent('.x-form-element', 5, true)
					|| this.el.findParent('.x-form-field-wrap', 5, true);

			this.virtualKeyboardIcon = label.createChild(
			{
				cls		: (this.keyboardIconCls || 'ux-virtualkeyboard-icon'),
				style	: 'width:16px; height:18px; position:absolute; left:0; top:0; display:block; background:transparent no-repeat scroll 0 2px;'
			}
			);

			// label.setWidth((label.getWidth()-this.virtualKeyboardIcon.getWidth()));

			ct.setWidth(1000);

			this.alignKeyboardIcon = function()
			{
				var el = this.el;
				this.virtualKeyboardIcon.alignTo(el, 'tl-tr',
						[
								2, 0
						]);
			}
			// Redefine alignErrorIcon to move the errorIcon (if it exist) to
			// the right of helpIcon
			if (this.alignErrorIcon)
			{
				this.alignErrorIcon = function()
				{
					this.errorIcon.alignTo(this.virtualKeyboardIcon, 'tl-tr',
							[
									2, 0
							]);
				}
			}

			this.on('resize', this.alignKeyboardIcon, this);

			this.virtualKeyboardIcon.on('click', function(e)
					{
						if (this.disabled)
						{
							return;
						}
						this.expandKeyboard();
						this.el.focus();
					}, this);

		}
	} // end of onRender

}
); // end of extend
